<template>
	<view>
		<!-- <statusbar></statusbar> -->
		<!-- <view class="cha">
			<image class="cha_icon" src="/static/img/login/cha.png" mode=""></image>
		</view> -->
		<view class="content">
			<view class="title">
				欢迎使用
			</view>
			<view class="smtitle">
				~立即登录.开启全新购物时代~
			</view>
			<view class="form">
				<u--input placeholder="请输入手机号" v-model="form.account" border='bottom'
					placeholderStyle='color:#999999;font-size:28rpx;' maxlength='11' clearable></u--input>
				<u-input border='bottom' :password='!pwstype' clearable placeholderStyle='color:#999999;font-size:28rpx'
					placeholder="请输入你的密码(6~20)" v-model="form.password">
					<template slot="suffix">
						<view class="" @click="pwstype=!pwstype">
							<u-icon v-if="!pwstype" name="eye-fill" color="#999" size="24"></u-icon>
							<u-icon v-else name="eye-off" color="#999" size="24"></u-icon>
						</view>
					</template>
				</u-input>
			</view>
			<view class="tips">
				<view class="tip" @click="go('/pages/login/reg?pid='+pid)">
					注册账号
				</view>
				<view class="tip" @click="go('/pages/login/forgetpwd')">
					忘记密码？
				</view>
			</view>
			<view class="btn">
				<view class="btn_box" @click="submit">
					立即登录
				</view>
			</view>
			<view class="sjtitle">
				<view class="line">

				</view>
				<view class="" style="margin: 0 40rpx;">
					社交账号登录
				</view>
				<view class="line">

				</view>
			</view>
			<view class="logintype">
				<!-- <image @click="vxlogin" class="login_icon" src="./img/wx.png" mode=""></image> -->
				<!-- weixin-circle-fill -->
				<u-icon size='80rpx' @click="vxlogin" color="#00c486" name="weixin-circle-fill"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		accountLogin,
		vxLogin
	} from '@/api/login.js'
	import {
		getopenid
	} from '@/api/my.js'
	export default {
		data() {
			return {
				form: {
					account: '',
					password: ''
				},
				pwstype: false,
				pid: ''
			};
		},
		methods: {
			setpwstype() {

			},
			go(url) {
				uni.navigateTo({
					url
				})
			},
			submit() {
				accountLogin(this.form).then(res => {
					if (res.data.code == 1) {
						uni.setStorageSync('token', res.data.data.userinfo.token);
						uni.setStorageSync('userinfo', res.data.data
							.userinfo);
						uni.switchTab({
							url: '/pages/tabbar/index'
						})
					} else {

					}
					console.log(res.data)
				})

			},
			vxlogin() {
				let _this = this
				
				uni.getUserProfile({
					desc: '展示用户的头像昵称',
					success: function(infoRes) {
						console.log(infoRes)
						wx.login({
							provider: 'weixin',
							onlyAuthorize: true,
							success: function(loginRes) {
								getopenid({
									code: loginRes.code
								}).then(res => {
									let openid = res.data.data.openid
									vxLogin({
										nickName: infoRes.userInfo
											.nickName,
										avatarUrl: infoRes.userInfo
											.avatarUrl,
										gender: infoRes.userInfo
											.gender,
										openId: openid,
										pid: _this.pid
									}).then(res => {
										uni.setStorageSync('token', res.data.data
											.userinfo.token);
										uni.setStorageSync('userinfo', res.data
											.data
											.userinfo);
										uni.switchTab({
											url: '/pages/tabbar/index'
										})
									})
								})
							}
						});
					},
					fail: (res) => {
						console.log(res)
					}
				});

			},
			geturlparam(data) {
				let that = this
				// window.location.href 获取地址
				let url = data
				let p = url.split('?')[1]
				let keyValue = p.split('&');
				let obj = {};
				for (let i = 0; i < keyValue.length; i++) {
					let item = keyValue[i].split('=');
					let key = item[0];
					let value = item[1];
					obj[key] = value;
				}
				this.pid = obj.pid

				// console.log(obj); //  {type:'1',id:'2'}
			},
		},
		onLoad: function() {
			this.pid=uni.getStorageSync('pid')
		}
	}
</script>

<style lang="less">
	.cha {
		width: 28rpx;
		height: 28rpx;
		position: fixed;
		left: 54rpx;
		top: 54rpx;

		.cha_icon {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding-top: 196rpx;
		padding-bottom: 40rpx;
	}

	.title {
		text-align: center;
		font-size: 50.03rpx;
		color: #212121;
		font-weight: 800;
	}

	.smtitle {
		text-align: center;
		font-size: 32.02rpx;
		color: #999999;
		margin-top: 40rpx;
	}

	.form {
		padding: 30rpx 46rpx 42rpx;

		.u-input {
			padding: 86rpx 0 46rpx 7rpx !important;
		}

		.see_icon {
			width: 36rpx;
			height: 30rpx;
		}
	}

	.tips {
		display: flex;
		justify-content: space-between;
		padding: 0 56rpx;
		font-size: 28rpx;
		color: #000000;
	}

	.btn {
		padding: 77rpx 33rpx 0;

		.btn_box {
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	.sjtitle {
		color: #9AACBD;
		font-size: 27rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 118rpx;

		.line {
			width: 181rpx;
			height: 2rpx;
			background: #D8E2EC;
			opacity: 0.2;
		}
	}

	.logintype {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

		.login_icon {
			width: 72rpx;
			height: 72rpx;
		}
	}
</style>
